<script setup lang="ts">
import { useTodosStore } from '../../stores/todos'
import { useSettingStore } from '../../stores/setting'
import { useSystemStore } from '../../stores/system'
import { computed, reactive, ref } from 'vue'
import FixedButton from '../../components/FixedButton.vue'
import CustLabel from '../../components/CustLabel.vue'
import dayjs from 'dayjs'
import { generateID } from '../../utils/generateID'

const todoStore = useTodosStore()
const systemStore = useSystemStore()
const settingStore = useSettingStore()
const showDetailInput = ref(false)
const showLabelsInput = ref(false)

// 切换标签选择状态
const toggleLabelSelection = (label: Label) => {
  // 查找settingStore中对应name的完整label对象
  const fullLabel = settingStore.allLabels.find(item => item.name === label.name)
  if (fullLabel) {
    const index = form.labels.findIndex(item => item.name === label.name)
    if (index > -1) {
      form.labels.splice(index, 1)
    } else {
      form.labels.push({ ...fullLabel })
    }
  }
}

// 删除标签
const removeLabel = (label: Label) => {
  const index = form.labels.findIndex(item => item.name === label.name)
  if (index > -1) {
    form.labels.splice(index, 1)
  }
}

const form = reactive<Todo>({
  id: generateID(),
  title: '',
  remark: '',
  description: '',
  location: '',
  labels: [],
  time: null,
  status: 'doing',
  doneTime: null,
	isSelected: false
})

const time = computed(() => {
	if (!form.time) return '未选择时间'
	return dayjs(form.time).format('YYYY/M/D HH:mm')
})

const submit = () => {
	// console.log(form)
	if (form.title.trim() === '') {
	  return uni.showToast({
			title: '请输入标题',
			icon: 'none'
		})
	}

	todoStore.addTodo(form)
	uni.navigateBack()
}
</script>

<template>
	<view class="add-todo-view" :style="{ height: `calc(100vh - ${systemStore.systemBottom}px)` }">
		<view class="layer-box title">
			<input class="uni-input" placeholder="标题" v-model="form.title" />
		</view>

		<view class="layer-box time">
			<view class="text">时间</view>
			<view class="time">
				<uni-datetime-picker v-model="form.time">
					<view :style="{ color: form.time ? '#3a3a3a' : '#909399' }">
						{{ time }}
					</view>
				</uni-datetime-picker>
			</view>
		</view>

		<view class="layer-box detail-layer">
			<view class="mutiple-floors">
				<view class="floor remark">
					<input class="uni-input" placeholder="备注" v-model="form.remark" />
				</view>
				<view class="floor detail no-bottom-border" @click="showDetailInput = !showDetailInput">
					<view class="text">详情</view>
					<view class="icon">
						<image src="../../static/icons/down.png" :style="{ transform: showDetailInput ? 'rotate(180deg)' : 'rotate(0deg)' }" />
					</view>
				</view>

				<view :class="['detail-input-box']">
					<view :class="['warpper', showDetailInput && 'show-detail-input']">
						<textarea placeholder="输入详情" :maxlength="9999" v-model="form.description" />
					</view>
				</view>
			</view>
		</view>

		<view class="layer-box location">
			<input class="uni-input" placeholder="地点" v-model="form.location" />
		</view>

		<view class="layer-box labels-layer">
			<view class="mutiple-floors">
				<view class="floor labels no-bottom-border" @click="showLabelsInput = !showLabelsInput">
					<view class="text">标签</view>
					<view class="icon">
						<image src="../../static/icons/down.png" :style="{ transform: showLabelsInput ? 'rotate(180deg)' : 'rotate(0deg)' }" />
					</view>
				</view>

				<view :class="['labels-input-box']">
					<view :class="['warpper', showLabelsInput && 'show-labels-input']">
						<!-- 标签显示区域 -->
						<view class="labels-section">
							<view class="labels-container" v-if="form.labels.length">
								<CustLabel v-for="label in form.labels" :key="label.name" :label="label" type="deleteable" @delete="removeLabel(label)" />
							</view>
							<view class="labels-container" v-else>
								<view class="add-filter-label-btn placeholder">添加标签</view>
							</view>
						</view>

						<!-- 标签选择下拉框 -->
						<view class="all-labels-section">
							<!-- 所有标签列表 -->
							<view class="all-labels-list" v-if="settingStore.allLabels.length">
								<CustLabel
									v-for="label in settingStore.allLabels"
									:key="label.name"
									:label="label"
									type="primary"
									@click="toggleLabelSelection(label)"
								/>
							</view>
							<!-- 暂无标签提示 -->
							<view class="no-labels-msg" v-else>
								暂无标签，可在个人设置中添加标签
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="setToToday" @click="submit">
		<fixed-button text="添加" :textStyle="{ color: '#339ca8' }" :position="{ bottom: '120rpx', right: '60rpx' }" />
	</view>
</template>

<style scoped lang="scss">
.add-todo-view {
	background-color: $uni-background;
	padding: 20rpx 30rpx;

	.layer-box {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: $uni-white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.mutiple-floors {
			width: 100%;

			.floor {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid $uni-border-3;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
			}

			.icon {
				image {
					width: 40rpx;
					height: 40rpx;
					transition: transform 0.3s ease-in-out;
				}
			}

			.no-bottom-border {
				border-bottom: none;
				padding-bottom: 0;
				margin-bottom: 0;
			}
		}

		.uni-input {
			width: 100%;
		}
	}

	.detail-layer {
		padding-bottom: 0;

		.detail-input-box {
			width: 100%;
			margin-top: 30rpx;

			.warpper {
				overflow: hidden;
				height: 0;
				transition: height 0.3s ease-in-out;

				textarea {
					width: 100%;
					height: 100%;
				}
			}

			.show-detail-input {
				height: 500rpx;
				margin-bottom: 30rpx;
			}
		}
	}

	.labels-layer {
		padding-bottom: 0;

		.labels-input-box {
			width: 100%;
			margin-top: 30rpx;

			.warpper {
				overflow: hidden;
				height: 0;
				transition: height 0.3s ease-in-out;

				.labels-section {
					margin-bottom: 30rpx;

					.section-title {
						font-size: 28rpx;
						color: #666;
						margin-bottom: 20rpx;
						display: block;
					}

					.labels-container {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						align-items: center;
						gap: 20rpx;
						padding: 20rpx 30rpx;
						background-color: #f5f5f5;
						border: 1rpx solid #ddd;
						border-radius: 10rpx;
						min-height: 55rpx;

						.placeholder {
							color: #999;
						}
					}
				}

				.all-labels-section {
					.all-labels-list {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						gap: 20rpx;
					}

					.no-labels-msg {
						text-align: center;
						color: #999;
						padding: 40rpx 0;
					}
				}
			}

			.show-labels-input {
				height: fit-content;
				margin-bottom: 30rpx;
			}
		}
	}
}
</style>
